<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
@extends('layouts.layout')
@section('content')
    <!-- 内容 -->
    <div class="door">
        <div class="door-center">
            <div class="login-box">
                <ul class="login-nav">
                    <li>账号登录</li>
                    <span class="spacer1"></span>
                    <li>验证码登录</li>
                </ul>
                <div class="form-box">
                    <from class="login-from" id="tab1">
                        <input class="loginphone" type="text" placeholder="手机号" value="">
                        <input class="loginpwd" type="password" placeholder="密码" value="">
                        <!-- <button class="img-verification box">点击进行图片验证</button> -->
                        <div id="check-code" class="code-box" style='margin-bottom:0;'>
                            <input type="text" id="reg-code" maxlength="5" placeholder="验证码">
                            <div class="code" id="data_code" data-value="A4agC" style="color: rgb(94, 68, 68);
                                    text-align: center;line-height: 49px;background-color: #eee;font-size: 20px;cursor:pointer;">
                                A4agC
                            </div>
                        </div>

                        <div class="choice">
                            <img src="{{ asset('images/choiceno.png') }}" class='changeimg' alt="">
                            <span>记住登录状态</span>
                        </div>
                        <button class="login-button" onclick="login()">登录</button>
                    </from>
                    <from class="login-from item" id="tab2">
                        <input type="text" class="phonelogin" placeholder="手机号">
                        <div class="code-box">
                            <input type="text" placeholder="手机短信验证码">
                            <span class="spacer2"></span>
                            <button class="code">获取验证码</button>
                        </div>
                        <button class="login-button" onclick="phonelogin()">登录</button>
                    </from>
                </div>

                <div class="other">
                    <a href="{{route('register')}}">注册</a>
                    <a href="{{route('forgot')}}">忘记密码？</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->
@endsection
<script type="text/javascript">
    //登录方式切换
    $(function () {
        $(".login-nav li")
            .eq(0)
            .addClass("current")
            .siblings()
            .removeClass("current");
        $(".login-from")
            .eq(0)
            .show()
            .siblings()
            .hide();
        $(".login-nav li").each(function (index) {
            $(this).click(function () {
                $(this)
                    .addClass("current")
                    .siblings()
                    .removeClass("current");
                $(".login-from")
                    .eq(index)
                    .show()
                    .siblings()
                    .hide();
            });
        });
        //记住登录
        var a = 0;
        $(".choice").click(function () {
            if (a) {
                $(".changeimg").attr("src", "{{ asset('images/choiceno.png') }}");
                a = 0;
            } else {
                $(".changeimg").attr("src", "{{ asset('images/choiceyes.png') }}");
                a = 1;
            }
        });
        //图片验证码
        // $('.box').click(function() {
        //     $(this).remove();
        //     $('.iptbox').show();
        // })
    });
</script>
<script type="text/javascript">
    //login
    function login() {
        var telephone = $('.loginphone').val();
        var pwd = $('.loginpwd').val();
        var yzm = $('#data_code').html();
        var Iptyzm = $('#reg-code').val();

        function replaceReg(reg, str) {
            str = str.toLowerCase();
            return str.replace(reg, function (m) {
                return m.toUpperCase()
            })
        }
        var reg = /\b(\w)|\s(\w)/g;
        var isyzm = replaceReg(reg, yzm)
        var isIptyzm = replaceReg(reg, Iptyzm)
        console.log(isyzm, isIptyzm)
        if (!telephone) {
            alert('请输入注册的手机号')
        } else if (!pwd) {
            alert('请输入密码')
        } else if (!Iptyzm) {
            alert('请输入验证码')
        } else if (isyzm != isIptyzm) {
            alert('验证码不正确')
        } else if ($('.reg-check').attr('data-choose') == '0') {
            alert('记住登录状态')
        } else {
            $.post('/user/login', {
                phone: telephone,
                password: pwd
            }, function (data) {
                console.log(data)
                if (data.code ==0) {
                    localStorage.setItem("token",data.data.access_token);
                    window.location = '/'
                    return false;
                } else {
                    alert(data.wanchengzhuce);
                }
            }, 'json');
        }

    }

    //phonelogin
    function phonelogin() {
        var telephone = $('.phonelogin').val();
        var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;

        if (!telephone) {
            alert('请输入注册的手机号')
        } else if (!phoneReg.test(telephone)) {
            alert('请输入正确的手机号')
        }
        else {
            $.post('/user/login', {
                phone: telephone,
                password: pwd
            }, function (data) {
                if (data.code == 0) {
                    return false;
                    window.location = '/'
                } else {
                    alert(data.wanchengzhuce);
                }
            }, 'json');
        }

    }
</script>


<script type="text/javascript">
    $(function () {
        /**
         * 验证码
         * @param {Object} o 验证码长度
         */
        $.fn.code_Obj = function (o) {
            var _this = $(this);
            var options = {
                code_l: o.codeLength,//验证码长度
                codeChars: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                    'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
                ],
                codeColors: ['#f44336', '#009688', '#cddc39', '#03a9f4', '#9c27b0', '#5e4444', '#9ebf9f', '#ffc8c4', '#2b4754', '#b4ced9', '#835f53', '#aa677e'],
                code_Init: function () {
                    var code = "";
                    var codeColor = "";
                    var checkCode = _this.find("#data_code");
                    for (var i = 0; i < this.code_l; i++) {
                        var charNum = Math.floor(Math.random() * 52);
                        code += this.codeChars[charNum];
                    }
                    for (var i = 0; i < this.codeColors.length; i++) {
                        var charNum = Math.floor(Math.random() * 12);
                        codeColor = this.codeColors[charNum];
                    }
                    console.log(code);
                    if (checkCode) {
                        checkCode.css('color', codeColor);
                        checkCode.className = "code";
                        checkCode.text(code);
                        checkCode.attr('data-value', code);
                    }
                }
            };

            options.code_Init();//初始化验证码
            _this.find("#data_code").bind('click', function () {
                options.code_Init();
            });
        };
        $('#check-code').code_Obj({
            codeLength: 5
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    })
</script>

